import {Layout, CandidateHeader, Box} from '../components'
import {ReactNode} from 'react'

const CandidateLayout = ({children}: { children: ReactNode }) => (
    <Layout>
        <Box width='100%' height='100%' flex='flex' direction='column' justify='flex-start' align='flex-start'>
            <div className='header'>
                <CandidateHeader/>
            </div>
            <Box width='100%' height='100%' padding='4rem 0 0 0'>
                {children}
            </Box>
        </Box>

        <style jsx>{`
            .header{
                height: 4rem;
                width: 100%;
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                z-index:100;
            }
        `}</style>
    </Layout>
)

export default CandidateLayout